<template>
  <div class="login_bg">
    <div class="login_box">
      <div class="logo_box">
        <span>{{ $t('project.NAME') }}</span>
      </div>

      <div v-show="!ispassword">
        <el-row>
          <el-col :span="24">
            <el-input v-model="form.contact" class="login_input" :placeholder="$t('formholder.LOGINNAME')"></el-input>
          </el-col>
        </el-row>
        <el-col :span="24" class="boxDrag">
          <div class="el-input__inner dragB" id="backDiv">按住滑块拖动到最右边</div>
          <div class="dragA" id="dragDiv" @mousedown="mousedown($event)">
            <img class="imgs" src='@/assets/images/Group7@2x.png'>
          </div>
          <p class="el-input__inner dragC" id="backP"></p>
        </el-col>
        <div v-show="isphone">
          <el-row>
            <el-col :span="12">
              <el-input v-model="form.code" class="login_input codeinput" placeholder="验证码"></el-input>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" class="btn_login codebtn" @click="sendCode">发送验证码</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 重置密码 -->
      <div v-show="ispassword">
        <el-row>
          <el-col :span="24">
            <el-input v-model="form.newPassword" class="login_input" placeholder="设置密码"></el-input>
          </el-col>
          <el-col :span="24">
            <el-input v-model="form.fNewPassword" class="login_input" placeholder="确认密码"></el-input>
          </el-col>
        </el-row>
      </div>

      <div class="login_form">
        <el-form label-position="right" label-width="80px" :model="form">
          <el-row>
            <el-col :span="24">
              <el-button type="primary" class="btn_login" @click="nextcanso">{{next.nextname}}</el-button>
            </el-col>
          </el-row>
          <el-row v-show="!ispassword">
            <el-col :span="24">
              <p class="login_note">
                <router-link to="/login"><span>直接登录</span></router-link>
              </p>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "forgetPassword",
  data() {
    return {
      form: {
        contact: "",
        email: "",
        phone: "",
        nickname: "",
        password: "",
        code: "",
        newPassword: "",
        fNewPassword: "",
      },
      isphone: false,
      ismousedown: false,
      ispassword: false,
      next: {
        nextname: "下一步",
        next1: true,
        nextphone: false,
        nextemail: false,
      },
    };
  },
  mounted: function () {
    var dragDiv = document.querySelector("#dragDiv");
    var dragw = dragDiv.offsetWidth;
    var backDiv = document.querySelector("#backDiv");
    var backw = backDiv.offsetWidth;
    var backP = document.querySelector("#backP");
    backP.style.marginTop = "0px";
    var imgs = document.querySelector(".imgs");
  },
  methods: {
    mousedown(ev) {
      // 单滑块验证
      ev.preventDefault();
      let _this = this;
      var mouseX = ev.clientX - dragDiv.offsetLeft;
      document.onmousemove = function (ev) {
        let l = ev.clientX - mouseX;
        if (l < dragDiv.offsetWidth) {
          l = dragDiv.offsetWidth;
          backP.innerHTML = "";
        }
        if (l > backDiv.offsetWidth) {
          l = backDiv.offsetWidth;
          backP.innerHTML = "验证通过";
        }
        dragDiv.style.left = l - 60 + "px";
        backP.style.width = l + "px";
        backP.style.marginTop = "0px";
      };
      document.onmouseup = function (ev) {
        let l = ev.clientX - mouseX;
        if (l > backDiv.offsetWidth) {
          l = backDiv.offsetWidth - 60;
          _this.ismousedown = true;
        } else {
          l = 0;
        }
        dragDiv.style.left = l + "px";
        backP.style.width = l + 60 + "px";
        if (_this.ismousedown) {
          dragDiv.innerHTML =
            "<img class='imgs' src='../static/images/12a.png'>";
        }
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    nextcanso() {
      let _this = this;
      if (_this.next.next1) {
        // 初始下一步
        if (_this.form.contact == "") {
          _this.$message({
            message: "请输入邮箱/手机号！",
            type: "warning",
          });
          return;
        }

        if (_this.ismousedown == false) {
          _this.$message({
            message: "请拖动验证！",
            type: "warning",
          });
          return;
        }

        if (
          _this.isEmailAvailable(_this.form.contact) == false &&
          _this.isPoneAvailable(_this.form.contact) == false
        ) {
          _this.$message({
            message: "请输入正确的邮箱地址或手机号码!",
            type: "warning",
          });
          return;
        } else if (_this.isPoneAvailable(_this.form.contact)) {
          _this.isphone = true;
          _this.next.nextphone = true;
        } else if (_this.isEmailAvailable(_this.form.contact)) {
          _this.next.nextemail = true;
        }
      }
      if (_this.next.nextphone) {
        // 进入手机验证页
        if (_this.form.code == "") {
          _this.$message({
            message: "请输入验证码！",
            type: "warning",
          });
          return;
        }

        console.log("输入验证码后下一步");
        _this.ispassword = true;
        _this.next.nextname = "确认";

        if (_this.ispassword) {
          // 重置密码
          console.log("重置密码验证按钮");
          if (_this.form.newPassword == "") {
            _this.$message({
              message: "请输入新密码！",
              type: "warning",
            });
            return;
          }

          if (_this.form.fNewPassword == "") {
            _this.$message({
              message: "请确认新密码！",
              type: "warning",
            });
            return;
          }

          if (_this.form.newPassword != _this.form.fNewPassword) {
            _this.$message({
              message: "两次新密码不一致，请重新输入",
              type: "warning",
            });
            return;
          }

          // 发送重置密码请求
        }
      }

      if (_this.next.nextemail) {
        _this.next.nextname = "发送重置密码邮件";
      }
    },
    sendCode(e) {
      // 向手机发送验证码
    },

    isPoneAvailable(str) {
      // 验证手机格式
      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(str)) {
        return false;
      } else {
        return true;
      }
    },
    isEmailAvailable(str) {
      // 验证邮箱格式
      let pattern = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/;
      if (!pattern.test(str)) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login_bg {
  width: 100%;
  height: 100%;
  background: #fff;
}

.login_box {
  width: 350px;
  height: 388px;
  background: #fff;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -300px 0 0 -260px;
  padding: 85px 85px 127px 85px;
  text-align: center;
}

.logo_box {
  width: 100%;
  height: 63px;
  line-height: 63px;
  margin-bottom: 35px;
}

.logo_box span {
  font-size: 25px;
  color: #5399e1;
}

.logo {
  width: 55px;
  height: 63px;
  float: left;
  margin: 0 0 0 53px;
}

.login_input {
  margin-bottom: 25px;
}

.code {
  width: 133px;
  height: 38px;
  border: 1px solid #b6b6b6;
  background: #fff;
  float: right;
  text-align: center;
  line-height: 38px;
}

.btn_login {
  width: 100%;
  height: 40px !important;
  background: #5399e1 !important;
  font-size: 20px;
  line-height: 40px !important;
  padding: 0 !important;
  font-weight: lighter !important;
}

.btn_login:hover {
  background: #5399e1 !important;
}

.btn_login:active {
  background: #337bc4 !important;
}

.login_form span.el-checkbox__label {
  color: #565656 !important;
}

.login_note {
  text-align: center;
  margin-top: 25px;
  color: #565656;
  font-size: 14px;
}

.login_note span {
  color: #5399e1;
}

.imgVcode {
  position: relative;
  left: 200px;
  top: -52px;
}

.boxDrag {
  position: relative;
  padding-bottom: 25px;
}

.dragB {
  background-color: #d9d9d9;
  text-align: center;
  font-size: 12px;
  color: #565656;
}

.dragA {
  width: 60px;
  height: 40px;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  box-sizing: border-box;
  position: absolute;
  border-radius: 4px;
  left: 0;
  top: 0;
  z-index: 99;
}

.dragC {
  width: 50px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  padding: 0;
  background-color: #fdcc39;
  text-align: center;
  font-size: 12px;
  color: #565656;
}

.codeinput {
  width: 200px;
  height: 40px;
  font-size: 16px;
}

.codebtn {
  width: 135px;
  height: 40px;
  margin-left: 40px;
  font-size: 16px;
}
</style>
